<template>
  <div class="app-video">
    <VTab :flags="flag" @gettab="gettab"></VTab>
    <van-swipe
      class="my-swipe"
      :show-indicators="false"
      indicator-color="white"
      @change="onChange"
      ref="checkbox"
    >
      <van-swipe-item
        >
        <VRan></VRan>
        <!-- <VRan></VRan>
        <VRan></VRan>
        <VRan></VRan> -->
      </van-swipe-item>
      <van-swipe-item
        >
        <VMv></VMv>
      </van-swipe-item>
    </van-swipe>
    <!-- <VRan></VRan>
    <VMv></VMv> -->
  </div>
</template>

<script>
import VTab from "./V-Tab.vue";
import VRan from "./V-Ran.vue";
import VMv from "./V-Mv.vue";
export default {
  components: {
    VTab,
    VRan,
    VMv,
  },
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    gettab(val) {
      //   this.flag = val;
      if (val) {
        this.flag = true;
        this.$refs.checkbox.swipeTo(0);
      } else {
        this.flag = false;
        this.$refs.checkbox.swipeTo(1);
      }
    },
    onChange(index) {
      if (index === 1) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.app-video {
  background: #fafafa;
  padding: 0 66.7px;
  height: 100%;
  padding-top: 200px;
}
// .my-swipe .van-swipe-item {
// }
</style>